<template>
  <div class="picinfo_container">
    <h1 class="title">{{ list.title }}</h1>
    <p class="subtitle">
      <span class="pubtime">发表时间：{{ list.add_time | dateFormat }}</span>
      <span class="click">点击：{{ list.click }}次</span>
    </p>

    <vue-preview :slides="slide1"></vue-preview>

    <div class="content" v-html="list.content"></div>

    <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
import CmtBox from '../../../subcomponents/comment'

export default {
  name: 'picinfo',
  components: {
    CmtBox
  },
  created() {
    this.$store.dispatch('getImgInfo', this.id).then(res => {
      if(res.data.code === 200) {
        this.list = res.data.list[0]
      }
    })
  },
  data() {
    return {
      id: this.$route.params.id,
      list: [],
      slide1: [
        {
          src: '/static/images/2.jpg',
          msrc: '/static/images/2.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          src: '/static/images/2.jpg',
          msrc: '/static/images/2.jpg',
          alt: 'picture2',
          title: 'Image Caption 2',
          w: 1200,
          h: 900
        }
      ]
    }
  },
}
</script>

<style lang="less" scoped>
  .picinfo_container {
    padding: 0 4px;
    .title {
      font-size: 16px;
      color: #26a2ff;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle {
      font-size: 13px;
      padding-bottom: 10px;
      border-bottom: 2px solid #ddd;
      display: flex;
      justify-content: space-between;
    }
    .content {
      font-size: 13px;
      line-height: 30px;
    }
  }
</style>
